<script type="text/javascript">   
    var chart = null,options=null;
    var now = 1;
    $(document).ready(function() {       
        options ={
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Grafik Penjualan '+<?= $tahun ?>
            },
            subtitle: {
                text: 'All Retail KitaMart'
            },
            xAxis: {
                categories: [<?= $bulan; ?>]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Rupiah Penjualan'
                }
            },
            legend: {
                layout: 'vertical',
                backgroundColor: '#FFFFFF',
                align: 'left',
                verticalAlign: 'top',
                x: 100,
                y: 70,
                floating: true,
                shadow: true
            },
            tooltip: {
                formatter: function() {
                    return ''+
                        this.x +': '+ this.y ;
                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                    name: 'All Retail',
                    data: [<?= $total; ?>]
    
                }]
        }
        chart = new Highcharts.Chart(options);
        
        $('#hari').click(function(){
            now = 1;
            $('#hari').addClass('active');
            $('#bulan').removeClass('active');
            $.ajax({
                type:'POST',
                data:'bulan='+$('select[name="bulan"]').val()+'&tahun='+$('select[name="tahun"]').val(),
                url:'<?= base_url() . 'home/get_per_hari/' ?>',
                success:function(r){
                    var obj = jQuery.parseJSON(r);
                    options ={
                        chart: {
                            renderTo: 'container',
                            type: 'column'
                        },
                        title: {
                            text: 'Grafik Penjualan '+obj.tahun
                        },
                        subtitle: {
                            text: 'All Retail KitaMart'
                        },
                        xAxis: {
                            categories: obj.bulan
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: 'Rupiah Penjualan'
                            }
                        },
                        legend: {
                            layout: 'vertical',
                            backgroundColor: '#FFFFFF',
                            align: 'left',
                            verticalAlign: 'top',
                            x: 100,
                            y: 70,
                            floating: true,
                            shadow: true
                        },
                        tooltip: {
                            formatter: function() {
                                return ''+
                                    this.x +': '+ this.y ;
                            }
                        },
                        plotOptions: {
                            column: {
                                pointPadding: 0.2,
                                borderWidth: 0
                            }
                        },
                        series: [{
                                name: 'All Retail',
                                data: obj.total
                            }]
                    }
                    chart = new Highcharts.Chart(options);
                }
            });            
            
        });
        
        $('#bulan').click(function(){
            now = 2;
            $('#bulan').addClass('active');
            $('#hari').removeClass('active');
            $.ajax({
                type:'POST',
                data:'bulan='+$('select[name="bulan"]').val()+'&tahun='+$('select[name="tahun"]').val(),
                url:'<?= base_url() . 'home/get_per_bulan/' ?>',
                success:function(r){
                    var obj = jQuery.parseJSON(r);
                    options ={
                        chart: {
                            renderTo: 'container',
                            type: 'column'
                        },
                        title: {
                            text: 'Grafik Penjualan '+obj.tahun
                        },
                        subtitle: {
                            text: 'All Retail KitaMart'
                        },
                        xAxis: {
                            categories: obj.bulan
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: 'Rupiah Penjualan'
                            }
                        },
                        legend: {
                            layout: 'vertical',
                            backgroundColor: '#FFFFFF',
                            align: 'left',
                            verticalAlign: 'top',
                            x: 100,
                            y: 70,
                            floating: true,
                            shadow: true
                        },
                        tooltip: {
                            formatter: function() {
                                return ''+
                                    this.x +': '+ this.y ;
                            }
                        },
                        plotOptions: {
                            column: {
                                pointPadding: 0.2,
                                borderWidth: 0
                            }
                        },
                        series: [{
                                name: 'All Retail',
                                data: obj.total
                            }]
                    }
                    chart = new Highcharts.Chart(options);
                }
            });            
            
        });
        
        
        setInterval(function(){
            var urls ='';            
            if(now==1){
                $.ajax({
                    type:'POST',
                    data:'bulan='+$('select[name="bulan"]').val()+'&tahun='+$('select[name="tahun"]').val(),
                    url:'<?= base_url() . 'transaksi/get_per_hari/' ?>',
                    success:function(r){
                        var obj = jQuery.parseJSON(r);
                        options ={
                            chart: {
                                renderTo: 'container',
                                type: 'column'
                            },
                            title: {
                                text: 'Grafik Penjualan '+obj.tahun
                            },
                            subtitle: {
                                text: 'All Retail KitaMart'
                            },
                            xAxis: {
                                categories: obj.bulan
                            },
                            yAxis: {
                                min: 0,
                                title: {
                                    text: 'Rupiah Penjualan'
                                }
                            },
                            tooltip: {
                                formatter: function() {
                                    return ''+
                                        this.x +': '+ this.y ;
                                }
                            },
                            plotOptions: {
                                column: {
                                    pointPadding: 0.2,
                                    borderWidth: 0
                                }
                            },
                            series: [{
                                    name: 'All Retail',
                                    data: obj.total
                                }]
                        }
                        chart = new Highcharts.Chart(options);
                    }
                });     
            }else if(now==2){
                $.ajax({
                    type:'POST',
                    data:'bulan='+$('select[name="bulan"]').val()+'&tahun='+$('select[name="tahun"]').val(),
                    url:'<?= base_url() . 'home/get_per_bulan/' ?>',
                    success:function(r){
                        var obj = jQuery.parseJSON(r);
                        options ={
                            chart: {
                                renderTo: 'container',
                                type: 'column'
                            },
                            title: {
                                text: 'Grafik Penjualan '+obj.tahun
                            },
                            subtitle: {
                                text: 'All Retail KitaMart'
                            },
                            xAxis: {
                                categories: obj.bulan
                            },
                            yAxis: {
                                min: 0,
                                title: {
                                    text: 'Rupiah Penjualan'
                                }
                            },
                            legend: {
                                layout: 'vertical',
                                backgroundColor: '#FFFFFF',
                                align: 'left',
                                verticalAlign: 'top',
                                x: 100,
                                y: 70,
                                floating: true,
                                shadow: true
                            },
                            tooltip: {
                                formatter: function() {
                                    return ''+
                                        this.x +': '+ this.y ;
                                }
                            },
                            plotOptions: {
                                column: {
                                    pointPadding: 0.2,
                                    borderWidth: 0
                                }
                            },
                            series: [{
                                    name: 'All Retail',
                                    data: obj.total
                                }]
                        }
                        chart = new Highcharts.Chart(options);
                    }
                });
            }            
        }, 5000);
    });
    
</script>
<div id="chart">
    <h1>Transaksi</h1>
    <div id="res"></div>
    <div id="view">
        <a href="#" id="hari" class="active">Per Hari</a>
        <a href="#" id="bulan">Per Bulan</a>
        <a href="#" id="tahun">Per Tahun</a>
    </div>
    <div id="date">    
        <label>Bulan : </label>
        <select name="bulan">
            <option value="1">Januari</option>
            <option value="2">Februari</option>
            <option value="3">Maret</option>
            <option value="4">April</option>
            <option value="5">Mei</option>
            <option value="6">Juni</option>
            <option value="7">Juli</option>
            <option value="8">Agustus</option>
            <option value="9">September</option>
            <option value="10">Oktober</option>
            <option value="11">November</option>
            <option value="12">Desember</option>
        </select>
        <label>Tahun : </label>
        <select name="tahun">
            <?php
            $tahun = date('Y');
            $i = $tahun;
            $x = $tahun + 10;
            for ($i = $tahun; $i <= $x; $i++) {
                ?>
                <option value="<?= $i; ?>"><?= $i; ?></option>
                <?php
            }
            ?>
        </select>
    </div>
    <div class="clear"></div>
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</div>